{extend name="template"}

{block name="body"}
<style>
    body{width:100%;height:100%;background: url(__ROOT__/static/index/img/reg_bg_x.jpg) repeat-x 0 top #fff;}
</style>
<div class="gas-register gas-index layui-fluid" style="margin:0 auto;width:1200px;">

    <div style="margin:0 auto;width: inherit;">
        <div class="header padding-bottom-20" style="margin-top:25px;position:relative;">
            <a href="/"><img style="height:60px;" src="__ROOT__/static/index/img/logo1.png"></a>
            <a href="/" style="position:absolute;right:0;bottom:30px;font-size:14px;color:#fff;vertical-align: bottom;">返回首页</a>
        </div>
        <style>
            .login-table{margin:40px auto 0;}
            .login-table tr{height:42px;}
            .login-table tr th{font-size:13px;color:#666;text-align: right;padding-right:10px;}
            .login-table tr td{text-align:left;}
            .login-table input.normal{
                width:184px!important;
                height: 14px!important;
                padding: 6px 10px 7px 4px!important;
                border:1px solid #ddd;
            }
            .login-table input[type=checkbox]{
                vertical-align: -2px;
                margin-right:5px;
            }

            .login-table button {
                margin-right: 12px !important;
                padding: 7px 18px !important;
                text-decoration: none !important;
                font-size: 14px !important;
                background-color:#ff931d;
                border:0;
                color:white;
            }
            .layui-input{height:32px !important;line-height:32px !important;}
            .layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th {
                border-width: 1px;}
            .layui-laypage{margin:5px 0 0 0;}
            .layui-tab-title li a{color:#666 !important;}
        </style>
        <div class="layui-tab" style="padding:20px 0;width:100%;background-color: #fff;">
            <ul class="layui-tab-title">
                <li class="" style="min-width: 20px;"></li>
                <li class="layui-this"><a href="/edu/enroll.html">培训报名</a></li>
                <li><a href="/edu/classlist.html">我的培训</a></li>
                <li><a href="/edu/examenroll.html">考核报名</a></li>
                <li><a href="/edu/examlist.html">我的考核</a></li>
                <li><a href="/edu/cert.html">我的证书</a></li>
            </ul>
            <div class="layui-tab-content" style="min-height:340px;padding-top:0;">
                <div class="layui-tab-item"></div>
                <div class="layui-tab-item layui-show">
                    <div style="width:70%;height:380px;float:left;border-right:1px solid #ccc;">
                        <form name="register" class="layui-form" method="post" action="">
                            <table class="login-table" width="95%">
                                <tr>
                                    <th>培训名称：</th>
                                    <td style="width:180px;">
                                        <select name="class_id" lay-filter="demo"  lay-verify="required">
                                            <option value="">--请选择培训名称--</option>
                                            {foreach $classes as $key=>$vo}
                                            <option value="{$vo.id}">{$vo.name}</option>
                                            {/foreach}
                                        </select>
                                    </td>
                                    <th>岗位及工种：</th>
                                    <td style="width:180px;">
                                        <select name="work_position" lay-filter="demo2" lay-verify="required">

                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <th>姓名：</th>
                                    <td>
                                        <input class="normal"  lay-verify="required" maxlength="11" type="text" name="name" placeholder="请输入姓名" />
                                    </td>
                                    <th>性别：</th>
                                    <td>
                                        <input  lay-verify="required" type="radio" name="gender" value="男" title="男" checked />
                                        <input  lay-verify="required" type="radio" name="gender" value="女" title="女" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>身份证号：</th>
                                    <td>
                                        <input lay-verify="required" class="normal" maxlength="18" type="text" name="idno" placeholder="请输入身份证号" />
                                    </td>
                                    <th>手机号码：</th>
                                    <td>
                                        <input  lay-verify="required" class="normal" maxlength="11" type="text" name="phone" placeholder="请输入手机号码" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>工作单位：</th>
                                    <td>
                                        <input class="normal"  type="text" name="company" lay-verify="required" placeholder="请输入工作单位" />
                                    </td>
                                    <th>所在市州：</th>
                                    <td>
                                        <select name="city" lay-filter="demo3" lay-verify="required">
                                            {foreach $CITY_OPTION as $key=>$vo}
                                            <option value="{$vo}">{$vo}</option>
                                            {/foreach}
                                        </select>
                                    </td>
                                </tr>
                                <tr style="height:80px;">
                                    <th style="text-align: right;padding-right:0;">
                                        <img id="demo1" style="width:64px;height:64px;margin-right:20px;"
                                             src="__ROOT__/static/theme/img/image.png" />
                                    </th>
                                    <td class="text-left">
                                        <input ng-model="item.avatar" data-auto-none value="" type="hidden" name="avatar">
                                        <a id="test1" type="button" data-title="上传头像"
                                           data-file="btn" data-type="jpg,png,jpeg" data-field="avatar"
                                           class="layui-btn layui-btn-sm layui-btn-primary">上传头像</a>
                                        <p class="color-desc">建议尺寸 128像素 * 128像素，1M以内</p>
                                    </td>
                                </tr>
                                <tr style="height:80px;">
                                    <td colspan="4" style="text-align: center;">
                                        <input type="hidden" name="loginStatus" value="1" />
                                        <a class="layui-btn" lay-submit lay-filter="formDemo">立即提交</a>
                                        <a name="reset" type="reset" class="layui-btn layui-btn-primary">重 置</a>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div style="float:left;width:29%;font-size:14px;text-align:center;margin-top:10px;">
                        <form name="upload" method="post" action="">
                            <table class="login-table" style="width: 100%;margin-top:80px;">
                                <tr>
                                    <td style="text-align: center;">
                                        <input type="hidden" name="upload-enroll" value="" />
                                        <div style="padding:10px 0 30px;font-size:12px;color:#888;">多人报名?填写模板文件后上传更方便</div>
                                        <button id="test2" name="updatePassword" data-title="上传文件" data-file="btn"  data-field="upload-enroll" type="button">上传报名资料</button>
                                        <p style="padding-top:5px;">
                                            请按<a href="/excel/eduenroll.xlsx">模板文件</a>要求填写
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{/block}

{block name='style'}
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<script>if (location.href.indexOf('#') > -1) location.replace(location.href.split('#')[0])</script>
<link rel="stylesheet" href="__ROOT__/static/index/index.css">
{/block}

{block name='script'}
<script src="__ROOT__/static/index/index.js"></script>
<script>
    var classes = '{$classesJson|raw}';
    classes = classes.replace(/\s+/g,"");
    var classesJson = JSON.parse(classes);

    function getClassPositions(class_id){
        for(let i=0; i<classesJson.length; i++) {
            if(classesJson[i].id == class_id)
                return classesJson[i]['sub'];
        }
    }

    layui.use(['layer', 'jquery', 'form'], function () {
        layui.form.on('select(demo)', function(data){
            let positions = getClassPositions(data.value);
            let html = '<option value="">--请选择工种--</option>';
            for(let i=0; i<positions.length; i++){
                html += '<optgroup label="'+positions[i].name+'">'+positions[i].name+'</optgroup>';

                for(let j=0; j<positions[i]['sub'].length; j++) {
                    html += '<option value="' + positions[i]['sub'][j]['id'] + '">' + positions[i]['sub'][j]['name'] + '</option>'
                }
            }
            $("select[name=work_position]").html(html);
            layui.form.render();
        });
        layui.form.on('radio(GenderRadio)', function(data){
            $("input[name=gender]").val(data.value);
        });
    });

    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            let idno = $("input[name=idno]").val();
            if(idno.length!=18){
                layer.msg("请输入正确的身份证号码");
                return false;
            }
            let phone = $("input[name=phone]").val();
            if(phone.length!=11){
                layer.msg("请输入正确的手机号码");
                return false;
            }
            let avatar = $("input[name=avatar]").val();
            if(avatar==false){
                layer.msg("请上传个人头像");
                return false;
            }
            dopost()
            return false;
            /*layer.msg(JSON.stringify(data.field));
            return false;*/
        });
    });


    function doupload(){
        let data = $("form[name=upload]").serialize();
        $.post("/edu/enrollupload.html", data, function(res) {
            if(res.code==0){
                layer.msg(res.info);
            }else{
                layer.msg(res.info);
                setTimeout(function () {
                    location.href = "/edu/classlist.html";
                }, 2000);
            }

        },"json");
    }

    function dopost(){
        let data = $("form").serialize();
        $.post("/edu/enrollresult.html", data, function(res) {
            if(res.code==0){
                layer.msg(res.info);
            }else{
                layer.msg(res.info);
                setTimeout(function () {
                    location.href = "/edu/classlist.html";
                }, 2000);
            }

        },"json");
    }


    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;

        $("a[name=reset]").click(function () {
            $("form[name=register]")[0].reset();
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/admin/api.upload/file.html' //改成您自己的上传接口
            ,size: 1200
            , done(res){
                $("input[name=avatar]").val(res.url);
                $('#demo1').attr('src', res.url); //图片链接（base64）
                layer.msg("上传成功");
            },error: function () {
                layer.msg("上传失败，请稍候再试");
            }
        });

        var uploadInst2 = upload.render({
            elem: '#test2'
            , url: '/admin/api.upload/file.html' //改成您自己的上传接口
            ,size: 1200
            ,accept: 'file' //普通文件
            , done(res){
                $("input[name=upload-enroll]").val(res.url);
                doupload();
                //layer.msg("上传成功");
            },error: function () {
                layer.msg("上传失败，请稍候再试");
            }
        });

    });



</script>

{/block}
